import React from 'react';
import {
  Account,
} from '../containers/personal'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import * as UserAction from '../actions/user.action'
import * as PersonalAction from '../actions/personal.action'
import * as HomeAction from '../actions/home.action'
import {logout} from '../actions/auth.action'
import style from './style.user'
import mainStyle from './style'
import {InputList, Modal} from '../ui-components'
import { u } from '../actions/util'
import {Button} from 'sq-ui'

@connect(({app}) => ({app}), dispatch => ({ actions: bindActionCreators({ ...HomeAction, ...PersonalAction, ...UserAction,logout}, dispatch) }))
class UserSettings extends React.Component {
  constructor(props) {
    super(props);
    this.displayName = 'UserSettings';
    this.state = {
      transUser: null,
      isShowModal: false,
    }
  }
  handleSelect = (v) => {
    this.setState({
      transUser: v,
    });
  }
  handleSubmit = () => {
    this.props.actions.tranferRole({userId: this.state.transUser.userId}, () => {
      this.props.actions.logout(() => {
        location.href='/u';
      });
    });
  }
  onShow = () => {
    if(!this.state.transUser) return;
    this.setState({
      isShowModal: true,
    });
  }
  onHide = () => {
    this.setState({
      isShowModal: false,
    });
  }
  render() {
    return (
      <div>
        <Account {...this.props.actions} {...this.context} />
        <div className={mainStyle['container-layout']} style={{width:'700px',marginTop: '30px'}}>
          <div className={mainStyle['container-title']}>移交超级管理员权限</div>
          <span className={mainStyle['remind-span']} style={{textAlign:'left', marginBottom: '10px'}}>将超级管理员权限移交给：</span>
          <div className={mainStyle['inputArea']}>
            <InputList
              width={264}
              fetch={this.props.actions.fetchAtList}
              clear={this.props.actions.clearAtList}
              onSelect={this.handleSelect}
              list={this.props.app.atList}
              excludeList={[{userId: u.userId}]}
            />
            <Button style={{ display: 'inline-block',height:'0.32rem',verticalAlign:'top'}} blue label="确定" onClick={this.onShow} />
          </div>
        </div>
        <Modal
          active={this.state.isShowModal}
          onRequestClose={this.onHide}
          actions={['cancel', () => { this.onHide();this.handleSubmit(); }]}
          title="确认移交管理权限"
        >
          <div>超级管理员权限移交后，您将失去超级管理权限并自动退出系统，重新登录后将不能再进入系统设置界面。是否确认？</div>
        </Modal>
      </div>     
    );
  }
}

export default UserSettings;
